<template>
  <el-dialog :visible.sync="visible" width="600px" v-dialogDrag title="复制邀请" :close-on-click-modal="false" class="tl-dialog page" @open="open" @close="close" :append-to-body="true" :modal-append-to-body="true">
    <el-form class="tl-form" ref="form">
      <el-row>
        <el-col :span="24">
          <el-input v-model="content" type="textarea" :rows="8" placeholder=""></el-input>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">取消</el-button>
      <el-button type="primary" class="tag-meet" :data-clipboard-text="content" @click="doCopy">复制</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Clipboard from 'clipboard'
/** mixins */
/** VUE配置 */
export default {
  mixins: [],
  components: {},
  data() {
    return {
      visible: false
    }
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
    // 复制成功时的回调函数
    doCopy(e) {
      var clipboard = new Clipboard('.tag-meet')
      clipboard.on('success', e => {
        this.$tap.message('已成功复制到剪贴板', 'success')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$tap.message('该浏览器不支持自动复制,请手动复制', 'warning')
        // 释放内存
        clipboard.destroy()
      })
    }
  },
  created() {}
}
</script>
